<template>
<a-layout id="components-layout-demo-top-side-2">
    <a-layout-header class="header">
        <div class="title">计划管理系统</div>
    </a-layout-header>
    <a-layout>
        <a-layout-sider width="200" style="background: #fff">
            <a-menu mode="inline" :defaultSelectedKeys="['1']" :defaultOpenKeys="['sub0']" :style="{ height: '100%', borderRight: 0 }">
                <a-sub-menu key="sub0">
                    <span slot="title"><a-icon type="user" />学习计划</span>
                    <a-menu-item key="1" @click='onSelectStudy'>学习进度</a-menu-item>
                    <a-menu-item key="2" @click='onSelectStudy'>添加学习计划</a-menu-item>
                    <a-menu-item key="3" @click='onSelectStudy'>删除学习计划</a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub1">
                    <span slot="title"><a-icon type="user" />文章管理</span>
                    <a-menu-item key="1">发布文章</a-menu-item>
                    <a-menu-item key="2">修改文章</a-menu-item>
                    <a-menu-item key="3">文章列表</a-menu-item>
                    <a-menu-item key="4">文章分类</a-menu-item>
                </a-sub-menu>
            </a-menu>
        </a-layout-sider>
        <a-layout style="padding: 48px">
            <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
                <study-plan-list v-if="studyStudy == 1" />
                <add-study-plan v-if="studyStudy == 2" />
            </a-layout-content>
        </a-layout>
    </a-layout>
</a-layout>
</template>

<script lang="ts">
import AddStudyPlan from '@/components/StudyPlan/AddStudyPlan.vue'
import StudyPlanList from '@/components/StudyPlan/StudyPlanList.vue'

import {
    Provide,
    Vue
} from 'vue-property-decorator';
import Component from 'vue-class-component'
@Component({
    components: {
        AddStudyPlan,
        StudyPlanList
    },
})
export default class Home extends Vue {
    studyStudy: string = '1';
    // 选中学习状态
    onSelectStudy(obj: any): void {
        this.studyStudy = obj.key;
    }
}
</script>

<style lang="scss" scoped>
#components-layout-demo-top-side-2 {
    height: 100%;

    .header {

        color: #fff;

        .title {
            width: 120px;
            height: 31px;
            float: left;
            font-size: 16px;
        }
    }

}
</style>
